import React, { useRef } from 'react'
import { Button, Form, Modal } from 'react-bootstrap'
import { useBudgets } from '../context/BudgetsContext';

export default function AddExpenseMotal({ show, handleCloce, defaultBudgetId }) {
    const descriptionRef = useRef();
    const amountRef = useRef();
    const budgetIdRef = useRef();
    const { addExpense, budgets } = useBudgets();

    function handldSubmit(e) {
        e.preventDefault();
        addExpense(descriptionRef.current.value, parseFloat(amountRef.current.value), budgetIdRef.current.value);
        handleCloce();
    }
    return (
        <Modal show={show} onHide={handleCloce}>
            <Form onSubmit={handldSubmit}>
                <Modal.Header closeButton>
                    <Modal.Title>New Expense</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form.Group className='mb-3' controlId='description'>
                        <Form.Label>Description</Form.Label>
                        <Form.Control ref={descriptionRef} type='text' required />
                    </Form.Group>
                    <Form.Group className='mb-3' controlId='amount'>
                        <Form.Label>Amount</Form.Label>
                        <Form.Control ref={amountRef} type='number' required min={0} step={0.1} />
                    </Form.Group>
                    <Form.Group className='mb-3' controlId='budget'>
                        <Form.Label>Budget</Form.Label>
                        <Form.Select defaultValue={defaultBudgetId} ref={budgetIdRef}>
                            <option id='NOCLASS'>default</option>
                            {budgets.map(budget => (
                                <option key={budget.id} value={budget.id}>
                                    {budget.name}
                                </option>
                            ))}
                        </Form.Select>
                    </Form.Group>
                    <div className='d-flex justify-content-end'>
                        <Button variant='primary' type='submit'>yes</Button>
                    </div>
                </Modal.Body>
            </Form>
        </Modal>
    )
}
